<!--
 * @Author: Nico
-->
<template>
  <div style="overflow: hidden">
    <van-steps :active="1" active-color="#38f" active-icon="success" direction="vertical">
      <van-step v-for="(item, index) of cacheData" :key="index">
        <template #active-icon>
          <div class="flex justify-center mt-2" style="color: rgb(51, 136, 255)">
            <div class="items-center grid">
              <div class="items-center font-bold text-base w-full grid pb-1">{{ index + 1 }}0</div>
              <div class="font-medium">审批中</div>
            </div>
            <div>
              <van-icon class="mt-2" name="checked" size="20" />
            </div>
          </div>
        </template>
        <template #inactive-icon>
          <div class="flex justify-center mt-2">
            <div class="items-center grid">
              <div class="items-center font-bold text-base w-full grid pb-1">{{ index + 1 }}0</div>
              <div class="font-medium">未审批</div>
            </div>
            <div>
              <van-icon class="mt-2" name="more" size="20" />
            </div>
          </div>
        </template>
        <template #finish-icon>
          <div class="flex justify-center mt-2" style="color: black">
            <div class="items-center grid">
              <div class="items-center font-bold text-base w-full grid pb-1">{{ index + 1 }}0</div>
              <div class="font-medium">已审批</div>
            </div>
            <div>
              <van-icon class="mt-2" name="checked" size="20" />
            </div>
          </div>
        </template>
        <h3 class="py-1">
          <div v-for="(v, i) of titleQuery" :key="i" class="flex justify-between items-center text-xs">
            <span class="w-16">{{ v.key }}</span>
            <div class="flex-1">{{ item[v.value] }}</div>
          </div>
        </h3>
        <div class="bg-gray-200 border-gray-300 p-2 rounded">
          <div v-for="(v, i) of contentQuery" :key="i" class="flex justify-between items-center py-1 text-xs">
            <span class="w-16">{{ v.key }}</span>
            <div class="flex-1">{{ item[v.value] }}</div>
          </div>
        </div>
      </van-step>
    </van-steps>
  </div>

  <!-- <template v-else>
    <div :ref="'self' + info._id" v-ui-ref="vSetRef" :class="{ hidden: conditionProperty.hidden }">
      <pdaWidget v-if="isShowBatch" :class="['grid cols-2']" :list="info.list" />
    </div>
  </template> -->
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin } from '@ve/mixin'
  import { Steps, Step, Icon } from 'vant'
  import { isEmpty } from 'lodash'

  export default defineComponent({
    name: 'UiPdaSteps',
    components: {
      [Steps.name]: Steps,
      [Step.name]: Step,
      [Icon.name]: Icon,
    },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data: function () {
      return {
        cacheData: [
          {
            title: '长电数管收文',
            time: '2023-03-0616:19:22',
            point: '10已核(张家治2023-03-0611:09:28)20已核(任新楷 2023-03-0611:42:06)',
          },
          {
            title: '长电数管收文',
            time: '2023-03-0616:19:22',
            point: '10已核(张家治2023-03-0611:09:28)20已核(任新楷 2023-03-0611:42:06)',
          },
          {
            title: '长电数管收文',
            time: '2023-03-0616:19:22',
            point: '10已核(张家治2023-03-0611:09:28)20已核(任新楷 2023-03-0611:42:06)',
          },
        ],
        titleQuery: {},
        contentQuery: {},
      }
    },
    computed: {},
    watch: {},
    created() {
      console.log('info------info', this.info.extension.titleQuery.value, this.info.extension.contentQuery.value)
      this.titleQuery = this.info.extension.titleQuery && this.info.extension.titleQuery.value
      this.contentQuery = this.info.extension.contentQuery && this.info.extension.contentQuery.value
      let formData = this.info.data.formData

      if (!isEmpty(formData)) {
        // 数据注入表格得情况
        this.cacheData = formData
      }
    },
    methods: {},
  })
</script>
<style lang="scss" scoped>
  :deep() {
    .van-step__circle-container {
      // background: yellow !important;
    }
    .van-steps--vertical {
      padding-left: 4rem;
    }
    .van-step--vertical .van-step__line {
    }
    .van-step--vertical .van-step__circle-container {
      left: -33px;
    }
  }
</style>
